<template>
  <a-modal
    v-model:visible="editModal.visible"
    width="500px"
    :title="title"
    :mask-closable="false"
    :keyboard="false"
    @cancel="closeModal"
  >
    <a-card>
      <a-form ref="formRef" :model="form" :wrapper-col="{ span: 24 }" layout="vertical">
        <a-form-item :label="label" name="name" :rules="[{ required: true, message: `请输入${label}!` }]">
          <a-input v-model:value="form.name" placeholder="请输入" allow-clear />
        </a-form-item>
      </a-form>
    </a-card>

    <template #footer>
      <a-space>
        <a-button key="back" @click="closeModal">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="onSave">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref, Ref } from 'vue'

const emits = defineEmits(['onCopy'])
defineProps({
  title: {
    //弹框标题
    type: String,
    default: '复制模板名称'
  },
  label: {
    //输入框label
    type: String,
    default: '模板名称'
  }
})

const formRef = ref()
const editModal = reactive({
  visible: false
})
interface formFormat {
  id?: string
  name?: string
}
const form: Ref<formFormat> = ref({})
const loading = ref(false)

const closeModal = () => {
  form.value = {}
  formRef.value.clearValidate()
  loading.value = false
  editModal.visible = false
}

const closeLoad = () => {
  loading.value = false
}

const onSave = () => {
  formRef.value
    .validate()
    .then(() => {
      loading.value = true
      emits('onCopy', form.value)
    })
    .catch(() => {})
}

const show = (record) => {
  form.value = JSON.parse(JSON.stringify(record))
  editModal.visible = true
}

defineExpose({
  show,
  closeModal,
  closeLoad
})
</script>
